<template>
    <div class="new-design-case" id="newDesignCase">
        <vue-form class="row" :state="formstate" @submit.prevent="onSubmit" method="post" action="/dashboard/designers/design_cases">
            <div class="col-xs-7">
                <validate tag="div" class="form-group">
                    <label>作品名称
                        <span class="star text-red">*</span>
                    </label>
                    <input type="text" class="form-control" v-model="model.title" required name="design_case[title]" placeholder="作品名称" />

                    <field-messages name="design_case[title]" class="error" show="$touched || $submitted">
                        <div class="text-red" slot="required">请输入作品名称!</div>
                    </field-messages>
                </validate>
            </div>

            <div class="col-xs-7">
                <validate tag="div" class="form-group">
                    <label>项目地址
                        <span class="star text-red">*</span>
                    </label>
                    <input type="text" class="form-control" v-model="model.addess" required name="design_case[addess]" placeholder="项目地址" />

                    <field-messages name="design_case[addess]" class="error" show="$touched || $submitted">
                        <div class="text-red" slot="required">请输入项目地址!</div>
                    </field-messages>
                </validate>
            </div>

            <div class="col-xs-7">
                <validate tag="div" class="form-group">
                    <label>设计预算（万元）
                        <span class="star text-red">*</span>
                    </label>
                    <input type="number" class="form-control" v-model="model.budget" required name="design_case[budget]" placeholder="设计预算" />

                    <field-messages name="design_case[budget]" class="error" show="$touched || $submitted">
                        <div class="text-red" slot="required">请输入设计预算!</div>
                    </field-messages>
                </validate>
            </div>

            <div class="col-xs-7">
                <validate tag="div" class="form-group">
                    <label>项目总价（万元）
                        <span class="star text-red">*</span>
                    </label>
                    <input type="number" class="form-control" v-model="model.total_amount" required name="design_case[total_amount]" placeholder="项目总价" />

                    <field-messages name="design_case[total_amount]" class="error" show="$touched || $submitted">
                        <div class="text-red" slot="required">请输入项目总价!</div>
                    </field-messages>
                </validate>
            </div>

            <div class="col-xs-7">
                <validate tag="div" class="form-group">
                    <label>面积（㎡）
                        <span class="star text-red">*</span>
                    </label>
                    <input type="number" class="form-control" v-model="model.area" required name="design_case[area]" placeholder="面积" />

                    <field-messages name="design_case[area]" class="error" show="$touched || $submitted">
                        <div class="text-red" slot="required">请输入面积!</div>
                    </field-messages>
                </validate>
            </div>

            <div class="col-xs-7">
                <validate tag="div" class="form-group">
                    <label>门窗预算（万元）
                        <span class="star text-red">*</span>
                    </label>
                    <input type="number" class="form-control" v-model="model.window_and_door_budget" required name="design_case[window_and_door_budget]" placeholder="门窗预算" />

                    <field-messages name="design_case[window_and_door_budget]" class="error" show="$touched || $submitted">
                        <div class="text-red" slot="required">请输入门窗预算!</div>
                    </field-messages>
                </validate>
            </div>

            <div class="col-xs-8">
                <validate tag="div" class="form-group">
                    <label>项目说明
                        <span class="star text-red">*</span>
                    </label>
                    <textarea class="form-control" v-model="model.desc" name="design_case[desc]" required placeholder="该案例的项目概述" />

                    <field-messages name="design_case[desc]" class="error" show="$touched || $submitted">
                        <div class="text-red" slot="required">请输项目说明!</div>
                    </field-messages>
                </validate>
            </div>

            <div class="col-xs-12">
                <div class="radio">
                    <label>
                        <input type="radio" :value="true" v-model="checked" /> 我对因虚假资料引起的法律解纷负全部责任
                    </label>
                </div>
            </div>

            <div class="row margin-reset">
                <div class="col-xs-12">
                    <input type="hidden" name="authenticity_token" :value="getAuthToken()">
                    <input type="hidden" name="case_id" :value="caseId">
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </div>
        </vue-form>

        <hr>

        <div class="row add-photoes" v-if="hasCase">
            <div class="col-xs-12">
                <label>
                    上传作品
                    <small>注：不要在图片上放置设计师商业推广信息（除案例信息外）。</small>
                    <span class="star text-red">*</span>
                </label>

                <div class="row margin-reset photos">
                    <div v-for="photo in photoes" class="col-xs-3 item photo">
                        <img :src="photo">
                    </div>
                    <div class="col-xs-3 item new">
                        <div class="inset-border" @click="handlerUpload">
                            <i class="fa fa-camera"></i>
                            <h1>添加案例</h1>
                        </div>
                        <input type="file" ref="fileInput" class="hidden" @change="handlerFileChange">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import VueForm from 'vue-form'
import Query from '../query'
import Util from '../util'
import ErrorDialog from 'error_alert'
import SuccessDialog from 'success_alert'

var options = {
    validators: {
    }
}

export default {
    name: 'newDesignCase',

    data: () => ({
        checked: true,
        formstate: {},
        entry: {},
        hasCase: false,
        caseId: null,
        postUrl: "/dashboard/design_case_attachments/" + Util.getUrlParameter("id"),
        model: {
            title: '',
            address: '',
            budget: '',
            total_amount: '',
            area: '',
            window_and_door_budget: '',
            desc: ''
        },
        photoes: []
    }),

    props: {
      case: {
        default: null
      },
      attachments: {
        default: []
      }
    },

    methods: {
        onSubmit: function () {
          if (this.formstate.$invalid) {
            return;
          }
          $('form').submit()
        },

        handlerUpload: function () {
            var fileInput = this.$refs.fileInput
            fileInput.click()
        },

        getAuthToken: function() {
          return AUTH_TOKEN
        },

        handlerFileChange: function (e) {
            let fileInput = this.$refs.fileInput
            let file = fileInput.files[0]
            let self = this

            Util.uploadPhoto(e, self.postUrl, function(data) {
              self.photoes.push(data)
            })
        },

        imagePreview: function (file) {
            let _this = this

            if (!file || !window.FileReader) return;

            if (/^image/.test(file.type)) {
                // 创建一个reader
                let reader = new FileReader();
                // 将图片将转成 base64 格式
                reader.readAsDataURL(file);
                // 读取成功后的回调
                reader.onloadend = function () {
                    _this.photoes.push({ base64: this.result })
                }
            }
        }
    },
    mounted() {
      if(this.case) {
        this.hasCase = true
        this.caseId = Util.getUrlParameter("id")
        this.photoes = this.attachments
        for(let prop in this.case) {
          this.model[prop] = this.case[prop]
        }
      }
    },
    mixins: [new VueForm(options)]
}
</script>

<style lang="less" scoped>
.new-design-case {
    .radio {
        >label {
            color: #999999;
        }
        padding-bottom: 20px;
    }

    .error {
        display: none;
    }

    .form-group {
        label {
            position: relative;

            span {
                position: absolute;
                left: -15px;
                top: 2px;
            }

            small {
                color: #999;
            }
        }

        input,
        textarea {
            padding: 15px 20px;
            background-color: #FCFCFD;
            border: 1px solid #dddddd;
            outline: none;
            box-shadow: none;
        }

        input {
            height: 45px;
        }
    }

    .photos {
        margin-top: 20px;
        .item {
            height: 180px;
            background-color: #F6F7FC;
            padding-right: 0;
            margin-right: 15px;
            margin-bottom: 20px;

            &.photo {
                img {
                    width: 100%;
                    height: 100%;
                }
                padding: 0;
            }

            &.new {
                cursor: pointer;
                padding: 20px;

                .inset-border {
                    width: 100%;
                    height: 100%;
                    border: 2px dashed #dddddd;
                    display: flex;
                    flex-flow: column;
                    justify-content: center;
                    align-items: center;

                    i {
                        padding: 10px;
                        font-size: 30px;
                        color: #fff;
                        background-color: #dddddd;
                        border-radius: 50%;
                    }
                    h1 {
                        font-size: 15px;
                        color: #666666;
                    }
                }

                &:hover {
                    i,
                    h1 {
                        color: #3ECC77;
                    }

                    i {
                        background-color: #fff;
                    }
                }
            }
        }
    }

    .add-photoes{
        .star{
            position: absolute;
            top: 1px;
            left: 0;
        }
    }
}
</style>
